extends layout

block content
    include top_marked
    include header
    include top_button
    link(rel='stylesheet', href='/stylesheets/music_detail.css')
    script(src="/javascripts/music_detail.js")
    script(src="/javascripts/music_detail_play.js")
    - var len = music.comments.length
    - var page_num = Math.ceil(music.commentN / 10)
    - var commentnum = 10
    if music.commentN >= 10 
        -commentnum = 10
    if music.commentN < 10
        -commentnum = music.commentN
    -function prettyDate(dateString){
        //if it's already a date object and not a string you don't need this line:
        -var date = new Date(dateString);
        -var d = date.getDate();
        -var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        -var m = monthNames[date.getMonth()];
        -var y = date.getFullYear();
        -return y+' '+m+' '+d;
    -}
    div.page-content
        div.top_view
            div.music_poster
                if music.cover
                    img.ui.fluid.image.rounded.myimage(src='/uploads/covers/#{music.cover}')
                else
                    img.ui.fluid.image.rounded.myimage(src='/resources/images/default_cover.png')
            div.music_detail
                div.evaluate
                    div.ui.star.rating(data-rating="4")
                div.music_message
                    p 歌曲名字: #{music.name}
                    p 歌曲作者: 
                        a(href="/user?user_id=#{music.author._id}") #{music.author.username}
                    p 歌曲标签: 
                        each tag in music.tags
                            a(href="/category?tag_id=#{tag._id}&sorted=lastest",style="margin-right:5px;") #{tag.tag_name}
                    if music.based_on
                        p 歌曲类型: 
                            a(href="/music?music_id=#{music.based_on}") 改编音乐
                    else
                        p 歌曲类型: 原创音乐
                    p 发行时间: #{prettyDate(music.date)}

                div.right_message(style="padding-top:10px;")
                    //- button.circular.ui.icon.button.right_button
                    //-     i.share.icon
                    //-     分享
                    if user
                        if music.author._id.toString() == user._id.toString()    
                            button.circular.ui.icon.button.right_button(style="margin-left:10px;",id="editMusicInfo")
                                i.paint.brush.icon(style="margin-right:5px;")   
                                编辑音乐信息
                                //href="/music_info?music_id=#{music.spectrum._id}"
        div.middle_view
            div.ui.labeled.button(tabindex="0",style="margin-right:20px;")
                div.ui.red.button
                    i.heart.icon
                    span 试听
                a.ui.basic.left.pointing.label(id="listenN") #{music.listenN}
            if user
                if music.author._id.toString() != user._id.toString()
                    if user.is_collect
                        div.ui.labeled.button(tabindex="0",id="collect",style="margin-right:20px;")
                            div.ui.red.button
                                i.save.icon
                                span(id="collect_message") 已收藏
                            a.ui.basic.left.pointing.label(id="collectN") #{music.collectN}
                    else
                        div.ui.labeled.button(tabindex="0",id="collect",style="margin-right:20px;")
                            div.ui.red.button
                                i.save.icon
                                span(id="collect_message") 收藏
                            a.ui.basic.left.pointing.label(id="collectN") #{music.collectN}
            div.ui.labeled.button(tabindex="0",style="margin-right:20px;")
                div.ui.red.button
                    i.comments.icon
                    span 评论
                a.ui.basic.left.pointing.label(id="commentN") #{music.commentN}
            if music.is_spectrum_public == true
                div.ui.labeled.button(tabindex="0",id="edit",style="margin-right:20px;")
                    div.ui.red.button
                        i.paint.brush.icon
                        //a(href="/editor?spectrum_id=#{music.spectrum._id}",style="color:white;") 编辑
                        span 编辑音谱
            else
                if user
                    if music.author._id.toString() == user._id.toString()
                        //div.ui.labeled.button(tabindex="0",id="edit")
                        div.ui.red.button(tabindex="0",id="edit",style="margin-right:20px;")
                            i.paint.brush.icon
                            //a(href="/editor?spectrum_id=#{music.spectrum._id}",style="color:white;") 编辑
                            span 编辑音谱


        div.bottom_view
            div.introduction
                if music.introduction
                    div.ui.dividing.header.divideline
                    p.description(style="width:650px;") #{music.introduction}
                    //div.ui.dividing.header.divideline
                else
                    if user
                        if music.author._id.toString() == user._id.toString()
                            div.ui.dividing.header.divideline
                            p.description 给你的音乐添加介绍吧~
                            //div.ui.dividing.header.divideline
                        else
                            div.ui.dividing.header.divideline
                            p.description 这首音乐没有填介绍呢......
                            //div.ui.dividing.header.divideline
            div.ui.comments
                h3.ui.dividing.header(id="commentN2") #{music.commentN}评论
            div.send_comment
                div.comment_head
                    if user
                        if user.profile
                            img.ui.circular.avatar.image.pos(src='/uploads/heads/#{user.profile}')
                        else
                            img.ui.circular.avatar.image.pos(src='/resources/images/default_head.jpg')
                    else
                        img.ui.circular.avatar.image.pos(src='/resources/images/default_head.jpg')
                div.ui.form(style="display:inline-block;vertical-align:top;")
                    div.field
                        textarea.submit-textarea(id="content",rows="3" cols="50" maxlength="111")
                button.ui.primary.button.submit-button(id = "submit_button",style="margin-left:10px;") 发表评论
            div.ui.dividing.header.divideline
            div.my_comment(id = "comment_all")
                - for(var x = 1; x <= commentnum; x++)
                    div.comment
                        div.comment_head
                            if music.comments[len-x].comment_userId.profile
                                img.ui.circular.avatar.image.pos(src='/uploads/heads/#{music.comments[len-x].comment_userId.profile}')
                            else
                                img.ui.circular.avatar.image.pos(src='/resources/images/default_head.jpg')
                        div.all_content
                            div.name
                                p.description #{music.comments[len-x].comment_userId.username}
                            div.content
                                p.description #{music.comments[len-x].comment_content}
                            div.message
                                - var high = len-x+1
                                span.qua ##{high}
                                span.qua #{prettyDate(music.comments[len-x].comment_date)}
                        div.all
                            //div.cha 查看全部
                    div.ui.dividing.header.divideline
            div.next_page(id="next_page")
                //span 共#{page_num}页
                //    - for (var x = 1; x <= page_num; x++)
                //        //span.qua(style="color:blue;") #{x}
                //        a #{x}
                //span 下一页

    //- 音源读取进度条
    div.ui.basic.modal(id="progress-modal")
        div.ui.inverted.orange.progress(id="loading" data-value="1" data-total="88")
            div.bar
                div.progress
            div.label Loading Sources

    script.
        window.music = !{JSON.stringify(music)};
        window.user = !{JSON.stringify(user)};
        //console.log(music);
        //console.log(user);

    include footer
    include music_player